<template>
  <div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goods_id"
      :quota="quota"
      :quota-used="quotaUsed"
      :initial-sku="initialSku"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClickeds"
    >
    
    </van-sku>
  </div>
  <!-- 配置项暂时关闭  :message-config="messageConfig" -->
</template>

<script>
import { Toast } from "vant";
import API from "../../http/API";
import eventVue from "../../assets/zizhujian/index";
import { Sku } from "vant";
export default {
  name: "guger",

  props: ["specification"],
  components: {
    [Sku.name]: Sku,
    [Toast.name]: Toast,
  },
  watch: {
    // 物品栏
    specification(val) {
      this.specificationData = val;
      console.log(val);
      // this.show = val[val.length - 1].show;
      // 商品的数量

      // 商品id
      this.goods_id = val[0].goodsId;
      this.goods.picture = val[0].url;
      console.log(this.sku);

      this.sku.price = val[0].price;

      // val.pop();
      console.log(val.length);

      this.mans(val);
    },
    // 显示隐藏
  },
  data() {
    return {
      show: false,
      specificationData: [],
      // 先设置为0

      quota: 0,
      quotaUsed: 0,
      initialSku: {
        //默认选中
        s1: "",

        selectedNum: 1,
      },
      customSkuValidator: () => "请选择xxx!",

      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: "", //？？
        stock_num: 227, // 商品总库存？？
        none_sku: false, // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
        hide_stock: false, // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
      },
      goods_id: "",
      // quota: 3, //限购数量 库存旁边显示限购数
      // quota_used: 0, //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
      goods_info: {
        title: "测试商品A",
        picture:
          "https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg", //图片这个我有点混乱
      },

      showBase: true, //sku的框的显示
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      closeOnClickOverlay: true, //点击空白处关闭购物框

      customSkuValidator: () => "请选择xxx!",
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img01.yzcdn.cn/1.jpg",
      },
    };
  },
  created: function () {
    this.abtn();
    // 
  },

  methods: {
    abtn: function () {
      eventVue.$on("myFun", (message) => {
        //这里最好用箭头函数，不然this指向有问题
        // this.btext = message;
        this.show = message;

        console.log(message);
      });
    },

    onBuyClicked() {
      console.log("12346485");
    },

    // 添加购物车
    onAddCartClickeds(e) {
      // 发起网络请求

      console.log(e);

      let a = false;

      // if (a) {
      this.$post(API.POST_CART_ADD, {
        //             ①封装 token
        // ②goodsId:当前商品 ID
        // ③number：商品数量
        // ④productId：当前商品指定规格的商品 I
        token: localStorage.getItem("token"),
        goodsId: e.selectedSkuComb.goods_id,
        number: e.selectedNum,
        productId: e.selectedSkuComb.id,
      }).then((res) => {
        if (res.errmsg == "成功") {
          Toast({
            message: "加入购物车成功",
            position: "top",
          });
        }
        console.log(res);
      });
      // }
    },
    // 更改数据
    mans(val) {
      console.log(val);
      // 最多选项的是多少,来定义数组长度选项数组的下标
      let option = 0;
      let quanbu = new Array();
      // 先集合类型
      // 用来判断选择的项目
      // 先判断数据的那数据选项最大有多少项
      for (let index = 0; index < val.length; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        option =
          option < val[index].specifications.length
            ? val[index].specifications.length
            : option;
      }
      // 将动态数组循环进去
      for (let index = 0; index < option; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        quanbu.push([]);
      }
      for (let index = 0; index < val.length; index++) {
        // 来换取数据的最长度以免有一先数据格式是多一个选项的
        val[index].specifications.map(function (item, i) {
          // 啊哈哈哈哈这样子我就拥有了动态生成的数组来保数据选择的选项卡了
          quanbu[i].push(item);
          // console.log(item);
          // console.log(i);
        });
      }
      // console.log(quanbu);
      // 循环调用方法去重复的
      for (let index = 0; index < quanbu.length; index++) {
        // 将数据去重复
        quanbu[index] = this.repetition(quanbu[index]);
      }
      // console.log(quanbu);

      // 赋值长度
      // this.sku.tree.count = quanbu.length;
      //正式的插入动态插入格式

      let tree = [];
      // 循环选项卡
      for (let index = 0; index < quanbu.length; index++) {
        let a = index;
        // console.log(quanbu[index]);
        tree.push({
          k: "选项" + (a + 1),
          k_id: a + 1,
          v: [],
          k_s: "s" + (a + 1),
          count: quanbu[index].length,
        });
        for (let i = 0; i < quanbu[index].length; i++) {
          tree[index].v.push({
            id: i + 1,
            name: quanbu[index][i],
          });
        }
      }

      // 选项列表
      // ！！！！！！！！！！！！！！！！重要环节！！！！！！！！！！！！！
      let list = [];
      let a = 0;
      let s = 0;
      let s2 = 0;
      if (tree[0].v.length <= 1) {
        list.push({
          id: val[0].id,
          price: val[0].price + "0", //价格
          s1: 1,
          s2: 1,
          stock_num: val[0].number, //库存
          goods_id: val[0].goodsId,
        });
      } else {
        // 循环选项
        for (let i = 0; i < tree[0].v.length; i++) {
          // console.log(tree[index].v[i]);
          console.log(i);
          s = i + 1;

          for (let index = 0; index < tree[1].v.length; index++) {
            list.push({
              id: val[a].id,
              price: val[index].price + "0", //价格
              // discount: 122,折扣
              s1: s,
              s2: s2 + (index + 1),
              stock_num: val[a].number, //库存
              goods_id: val[a].goodsId,
            });
            console.log(i);
            a++;
          }
        }
      }

      console.log(a);

      this.sku.tree = tree;
      this.sku.list = list;
      // console.log(tree);
      // console.log(list);
      // console.log(this.sku);
      // console.log(tree);
    },

    //  查重复，筛选
    repetition(val) {
      let arr = val;
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] == arr[j]) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // c
  },
};
</script>

<style>
</style>